// pages/report/report.js
const second = require('../../api/second')
import * as echarts from '../../components/ec-canvas/echarts';

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true,
    },
    reportList: [],

  },

  initData() {
    const that = this
    second.reportList().then(res => {
      if (res.code == 200) {
        const campNames = res.rows.map(item => item.campName); // 营地名称
        const counts = res.rows.map(item => item.count); // 每个营地的数量
        this.setData({
          reportList: res.rows
        })
        this.loadBar(campNames, counts); // 更新柱状图
      }
      console.log("reportList", this.data.reportList);

    })
  },
  // loadBar(date, salesR, stockroomR) {
  //   let line = this.selectComponent('#mychart-dom-line')
  //   line.init((canvas, width, height, dpr) => {
  //     const lineChart = echarts.init(canvas, null, {
  //       width: width,
  //       height: height,
  //       devicePixelRatio: dpr // new
  //     })
  //     var lineOperation = {
  //       tooltip: {
  //         trigger: 'axis',
  //       },
  //       grid: {
  //         top: '8%',
  //         left: '3%',
  //         right: '4%',
  //         bottom: '2%',
  //         containLabel: true
  //       },
  //       xAxis: {
  //         type: 'category',
  //         boundaryGap: false,
  //         data: date
  //       },
  //       yAxis: {
  //         type: 'value'
  //       },
  //       series: [{
  //           name: '预约数',
  //           type: 'line',
  //           stack: 'Total',
  //           itemStyle: {
  //             normal: {
  //               color: '#3097FE', //改变折线点的颜色
  //               lineStyle: {
  //                 color: '#3097FE' //改变折线颜色
  //               }
  //             }
  //           },
  //           data: salesR
  //         },
  //         {
  //           name: '销售额',
  //           type: 'line',
  //           stack: 'Total',
  //           itemStyle: {
  //             normal: {
  //               color: '#4BB84B', //改变折线点的颜色
  //               lineStyle: {
  //                 color: '#4BB84B' //改变折线颜色
  //               }
  //             }
  //           },
  //           data: stockroomR
  //         }
  //       ],
  //       dataZoom: [{
  //           // 设置滚动条的隐藏与显示
  //           show: true,
  //           // 设置滚动条类型
  //           type: "slider",
  //           // 设置背景颜色
  //           backgroundColor: "rgb(19, 63, 100)",
  //           // 设置选中范围的填充颜色
  //           fillerColor: "rgb(16, 171, 198)",
  //           // 设置边框颜色
  //           borderColor: "rgb(19, 63, 100)",
  //           // 是否显示detail，即拖拽时候显示详细数值信息
  //           showDetail: false,
  //           // 数据窗口范围的起始数值
  //           startValue: 0,
  //           // 数据窗口范围的结束数值（一页显示多少条数据）
  //           endValue: 5,
  //           // empty：当前数据窗口外的数据，被设置为空。
  //           // 即不会影响其他轴的数据范围
  //           filterMode: "empty",
  //           // 设置滚动条宽度，相对于盒子宽度
  //           width: "80%",
  //           // 设置滚动条高度
  //           height: 5,
  //           // 设置滚动条显示位置
  //           left: "center",
  //           // 是否锁定选择区域（或叫做数据窗口）的大小
  //           zoomLoxk: true,
  //           // 控制手柄的尺寸
  //           handleSize: 0,
  //           // dataZoom-slider组件离容器下侧的距离
  //           bottom: 1,
  //         },
  //         {
  //           // 没有下面这块的话，只能拖动滚动条，
  //           // 鼠标滚轮在区域内不能控制外部滚动条
  //           type: "inside",
  //           // 滚轮是否触发缩放
  //           zoomOnMouseWheel: false,
  //           // 鼠标滚轮触发滚动
  //           moveOnMouseMove: true,
  //           moveOnMouseWheel: true,
  //         },
  //       ]
  //     }
  //     lineChart.setOption(lineOperation)
  //     return lineChart
  //   })
  // },
  loadBar(campNames, counts) {
    console.log("counts",counts);
    console.log("campNames",campNames);
    let bar = this.selectComponent('#mychart-dom-bar');
    
    // 检查 bar 是否正常获取
    if (!bar) {
      console.error('bar component not found!');
      return;
    }
    
    bar.init((canvas, width, height, dpr) => {
      const barChart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        xAxis: {
          type: 'category',
          data: campNames, // 使用营地名称作为 x 轴
          axisLabel: {
            interval: 0, // 防止标签重叠
            rotate: 45   // 旋转标签以便显示
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '订单数量',
          type: 'bar',
          data:  counts , // 订单数量作为数据
          itemStyle: {
            color: '#4BB84B'
          }
        }],
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
      };
  
      barChart.setOption(option);
      return barChart;
    });
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.initData()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})